<template>
  <header>
    <div class="step-item" v-for="(v, i) in navbarBarData" :key="i">
      <div class="step-img">
        <img :src="v.icon" :alt="v.name" />
      </div>
      <div :class="['step-name', activeId == v.id ? 'active' : '']">{{ v.name }}</div>
    </div>
  </header>
</template>

<script>
export default {
  name: 'vHeader',
  props: ['id'],
  data () {
    return {
      activeId: 0,
      navbarBarData: [{
        id: 0,
        name: '新人寄语',
        icon: require('../../assets/images/icon-step-1.png')
      },
      {
        id: 1,
        name: '入职须知',
        icon: require('../../assets/images/icon-step-2.png')
      },
      {
        id: 2,
        name: '入职登记',
        icon: require('../../assets/images/icon-step-3.png')
      },
      {
        id: 3,
        name: '入职材料',
        icon: require('../../assets/images/icon-step-4.png')
      },
      {
        id: 4,
        name: '协议签署',
        icon: require('../../assets/images/icon-step-5.png')
      }
      ]
    }
  },
  watch: {
    id (newVal) {
      this.activeId = newVal
    }
  }
}
</script>
<style type="text/stylus" lang="stylus">
header
  width 100%
  height 83px
  display flex
  flex-wrap nowrap
  justify-content center
  align-items center
  border-bottom 1px solid #493e4d

header .step-item
  flex 1
  display flex
  flex-direction column
  align-items center
  color #7c7ba0

header .step-item .active
  color #4297fd

header .step-item img
  width 35px
  height 35px
</style>
